<template>
  <div class="resume-report">
    <div class="title-text">候选人评估报告</div>

    <div style="margin:0 0 30px 0">
      <div class="title1-text">尊敬的企业用户您好：</div>
      <p
        class="main-text"
        style="text-indent:2em;"
      >为了让您对候选人有一个更加全面和细致的了解，为了节约您宝贵的面试时间，为了提高您对候选人综合判断的准确性，为了将候选人更加真实和内在的一面呈现在您的面前，我们特向您提供本报告。</p>
      <p class="main-text" style="text-indent:2em;">本报告共分为七大部分，分别为：</p>
      <p class="main-text" style="text-indent:2em;">第一部分：候选人基本信息；</p>
      <p class="main-text" style="text-indent:2em;">第二部分：候选人的知识与技能结构；</p>
      <p class="main-text" style="text-indent:2em;">第三部分：候选人过往经历与主要业绩描述；</p>
      <p class="main-text" style="text-indent:2em;">第四部分：候选人的个性特征与管理风格倾向；</p>
      <p class="main-text" style="text-indent:2em;">第五部分：候选人的优劣势分析；</p>
      <p class="main-text" style="text-indent:2em;">第六部分：核心胜任力构成；</p>
      <p class="main-text" style="text-indent:2em;">第七部分：推荐建议。</p>
    </div>

    <div style="margin:0 0 30px 0">
      <div class="title1-text">一、基本信息</div>
      <div class="basic-information">
        <div class="title3-text information">姓名：</div>
        <div class="main-text">{{data.name}}</div>
      </div>
      <div class="basic-information">
        <div class="title3-text information">性别：</div>
        <div class="main-text">{{data.sex == 0?'男':'女'}}</div>
      </div>
      <div class="basic-information">
        <div class="title3-text information">出生年份：</div>
        <div class="main-text">{{data.birth}} 年</div>
      </div>
      <div class="basic-information">
        <div class="title3-text information">所在城市：</div>
        <div class="main-text">{{data.city}}</div>
      </div>
      <div class="basic-information">
        <div class="title3-text information">期望职位：</div>
        <div class="main-text" v-for="job in data.hopeJob">{{job.hopeLicenseStr}}</div>
      </div>
      <div class="basic-information">
        <div class="title3-text information">期望年薪：</div>
        <div class="main-text" v-for="job in data.hopeJob">
          <span v-if="job.taxType == 0">税前&nbsp;</span>
          <span v-if="job.taxType == 1">税后&nbsp;</span>
          {{job.salaryPerMonthLow}}-{{job.salaryPerMonthHigh}} W/{{job.yearNum}} 年
        </div>
      </div>
    </div>

    <div style="margin:0 0 30px 0">
      <div class="title1-text">二、知识与技能</div>
      <div class="knowledge-skill">
        <div class="title2-text">教育经历：</div>
      </div>

      <div class="knowledge-skill" v-for="education in data.educationExperiences">
        <div class="knowledge-skill-content">
          <span class="main-head-text" style="margin-right:30px;">{{education.school}}</span>
          <span
            class="sub-text"
            style="margin-right:30px;"
          >{{education.startTime}}/{{education.endTime}}</span>
          <span class="main-text knowledge-content">
            <span>{{education.major}}</span>
            <span class="line-padding">|</span>
            <span>{{education.academicStr}}</span>
          </span>
        </div>
      </div>

      <div class="knowledge-skill">
        <div class="title2-text">人才亮点：</div>
        <div class="knowledge-skill-content">
          <div class="main-head-text">
            一级建造师&nbsp;
            <span class="title3-text">机电工程</span>
          </div>
        </div>
      </div>
    </div>

    <div style="margin:0 0 30px 0">
      <div class="title1-text">三、过往经历与业绩描述</div>
      <div class="experience">
        <div class="title2-text experience-left">工作经历：</div>
        <div class="experience-right">
          <div class="experience-company" v-for="jobExcucation in data.jobExperiences">
            <div class="company-top">
              <span class="main-head-text" style="margin-right:10px;">{{jobExcucation.companyName}}</span>
              <span class="sub-text">{{jobExcucation.jobStartTime}}/{{jobExcucation.jobEndTime}}</span>
            </div>
            <div class="main-text company-top">
              <span>{{jobExcucation.jobName}}</span>
              <span class="line-padding">|</span>
              <span>{{jobExcucation.licenseTypeStr}}</span>
              <span class="line-padding">|</span>
              <span>{{jobExcucation.companyTypeStr}}</span>
              <span class="line-padding">|</span>
              <span>{{jobExcucation.workCity}}</span>
            </div>
            <p class="main-text" v-html="jobExcucation.jobContent"></p>
          </div>
        </div>
      </div>
      <div class="experience">
        <div class="title2-text experience-left">项目经验：</div>
        <div class="experience-right">
          <div class="experience-company" v-for="projectExcucation in data.projectExperience">
            <div class="company-top">
              <span
                class="main-head-text"
                style="margin-right:10px;"
              >{{projectExcucation.projectName}}</span>
              <span
                class="sub-text"
              >{{projectExcucation.projectStartTime}}/{{projectExcucation.projectEndTime}}</span>
            </div>

            <p class="main-text" v-html="projectExcucation.projectContent"></p>
          </div>
        </div>
      </div>
    </div>
    <div style="margin:0 0 30px 0">
      <div class="title1-text">四、个性特征与管理风格倾向</div>
      <div class="title1-text individuation">该候选人主要符合以下{{report.featureNum}}项个性与行为特征：</div>
      <div class="experience" v-if="report.influence">
        <div class="title3-text experience-left individuations">影响性：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.influence"></p>
          </div>
        </div>
      </div>
      <div class="experience" v-if="report.emotion">
        <div class="title3-text experience-left individuations">情感性：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.emotion"></p>
          </div>
        </div>
      </div>
      <div class="experience" v-if="report.independence">
        <div class="title3-text experience-left individuations">独立性：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.independence"></p>
          </div>
        </div>
      </div>
      <div class="experience" v-if="report.selfDiscipline">
        <div class="title3-text experience-left individuations">自律性：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.selfDiscipline"></p>
          </div>
        </div>
      </div>
    </div>
    <div style="margin:0 0 30px 0">
      <div class="title1-text">五、优劣势分析</div>
      <div class="experience" v-if="report.advantage">
        <div class="title2-text experience-left individuations">优势：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.advantage"></p>
          </div>
        </div>
      </div>
      <div class="experience" v-if="report.disAdvantage">
        <div class="title2-text experience-left individuations">劣势：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.disAdvantage"></p>
          </div>
        </div>
      </div>
    </div>
    <div style="margin:0 0 30px 0">
      <div class="title1-text">六、核心胜任力构成</div>
      <div class="title1-text individuation">该候选人核心胜任力主要有以下{{report.coreCompetencyNum}}大要素：</div>

      <div class="experience" v-if="report.personalUnderstanding">
        <div class="title3-text experience-left individuations">人际理解力：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.personalUnderstanding"></p>
          </div>
        </div>
      </div>

      <div class="experience" v-if="report.inflencePower">
        <div class="title3-text experience-left individuations">影响力：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.inflencePower"></p>
          </div>
        </div>
      </div>

      <div class="experience" v-if="report.communicationAbility">
        <div class="title3-text experience-left individuations">沟通协调能力：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.communicationAbility"></p>
          </div>
        </div>
      </div>

      <div class="experience" v-if="report.leaderShip">
        <div class="title3-text experience-left individuations">团队领导能力：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.leaderShip"></p>
          </div>
        </div>
      </div>

      <div class="experience" v-if="report.responsibility">
        <div class="title3-text experience-left individuations">责任感：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.responsibility"></p>
          </div>
        </div>
      </div>

      <div class="experience" v-if="report.analytic">
        <div class="title3-text experience-left individuations">分析思维：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.analytic"></p>
          </div>
        </div>
      </div>

      <div class="experience" v-if="report.planningAbility">
        <div class="title3-text experience-left individuations">计划组织能力：</div>
        <div class="experience-right">
          <div class="experience-company">
            <p class="main-text" v-html="report.planningAbility"></p>
          </div>
        </div>
      </div>
    </div>

    <div style="margin:0 0 30px 0">
      <div class="title1-text">七、推荐建议</div>
      <div class="title1-text individuation">对于该候选人我们的建议是：</div>
      <p class="main-text" v-html="report.recommenDations"></p>
    </div>
    <div class="watermark"></div>
  </div>
</template>

<script>
export default {
  props: ['data', 'report'],
  watch: {},
  data() {
    return {
      info: {},
      reportInfo: {}
    }
  },
  methods: {},
  components: {}
}
</script>

<style lang="scss" scoped>
.resume-report {
  padding: 30px 50px;
  width: 100%;
  height: 600px;
  overflow: auto;
  position: relative;
  box-sizing: border-box;

  //标题文字样式
  .title-text {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 36px;
    text-align: center;
  }

  //一级标题文字
  .title1-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 36px;
  }

  //二级标题文字
  .title2-text {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    line-height: 36px;
  }

  //三级标题文字
  .title3-text {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 36px;
  }

  //主要文字的标题
  .main-head-text {
    font-size: 16px;
    color: #555;
    font-weight: bold;
  }

  //主要文字样式
  .main-text {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 24px;
    margin-left: 10px;
  }

  .sub-text {
    font-size: 12px;
    color: #999;
    font-weight: 400;
  }

  .individuation {
    font-weight: 400;
    line-height: 36px;
  }

  .individuations {
    line-height: 24px;
  }

  //基本信息样式
  .basic-information {
    display: flex;

    .main-text {
      line-height: 36px;

      span {
        font-size: 10px;
        color: #666;
      }
    }

    .information {
      min-width: 85px;
      margin: 0 15px 0 0;
      font-weight: 400;
    }
  }

  //知识技能样式
  .knowledge-skill {
    display: flex;

    .knowledge-skill-content {
      margin: 0 0 0 20px;
      width: 570px;
      line-height: 36px;

      .sub-text {
        font-size: 14px;
      }

      .knowledge-content {
        line-height: 36px;
      }
    }
  }

  //经历样式
  .experience {
    display: flex;
    justify-content: space-between;

    .experience-left {
      width: 110px;
    }

    .experience-right {
      width: 756px;

      .experience-company {
        margin: 0 0 20px 0;

        .company-top {
          line-height: 36px;
        }
      }
    }
  }

  .watermark {
    width: 60px;
    height: 60px;
    z-index: 3;
    left: 48px;
    top: 5px;
    position: absolute;
    background: url('../assets/img/communication/shuiyin.png') no-repeat center;
    background-size: 100% 100%;
  }
  .line-padding {
    padding: 0 10px;
  }
}
</style>
